<template>
    <div class="topBar">

        <div class="breadCrumbArea">
            <!--        伸缩按钮-->
            <el-row   style="height: 100%">
                <el-col :span="2" class="topBarIconStyle">
                    <i :class="iconStyle" @click="checkState"></i>
                </el-col>
                <el-col :span="8" class="topBarHeaderTextStyle">

                    <el-page-header @back="goIndex" title="返回首页" :content="breadCrumb" style="line-height: 55px;"></el-page-header>

                </el-col>

            </el-row>
        </div>

            <!--                弹出个人用户操作-->
        <div  class="userIconStyle" >
            <!--                    用户头像-->
            <div style="display: inline-block;height: 55px;">
                <div style="display: flex;align-items: center;height: 100%">
                    <el-avatar v-if="currentUser.avatarUrl" :src="currentUser.avatarUrl" class="avatar"></el-avatar>
                    <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                </div>
            </div>
<!--            下拉框-->
            <div  style="height: 100%;float: right;line-height: 55px;">
                <el-dropdown trigger="click">
                    <div class="el-dropdown-link" style="display: inline-block">
                        <!--                    用户昵称-->
                        <div class="userNicknameStyle">
                            <span>{{currentUser.nickname}}</span>
                        </div>
                        <!--                    展开框-->
                        <div class="showProfile">
                            <i class="el-icon-arrow-down"></i>
                        </div>
                    </div>

                    <el-dropdown-menu slot="dropdown" style="width: 100px;"  >
                        <el-dropdown-item >
                            <div class="dropMenuItemStyle" @click="goProfile">个人信息</div></el-dropdown-item>
                        <el-dropdown-item><div class="dropMenuItemStyle" @click="goHome">退出系统</div></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </div>



        </div>

    </div>
</template>

<script>
    export default {
        name: "TopBarComponent",
        data(){
            return{
                //侧边栏是否折叠
                isCollapse: false,
                //侧边栏的宽度
                sideBarWidth: 10,
                //icon的折叠图标
                iconStyle: 'el-icon-s-fold',
                currentUser: JSON.parse(localStorage.getItem("user")),//获取当前登录用户
                breadCrumb: JSON.parse(localStorage.getItem("breadCrumb")),//面包屑，页签


            }
        },
        created() {
        },
        mounted() {
            // 监听localhostStorage的数据变化,同步修改顶部栏上的值
            let that = this;
            window.addEventListener('setItem', function(e) {
                if (e.key=="user"){
                    that.currentUser=JSON.parse(localStorage.getItem("user"));
                }else if (e.key=="breadCrumb"){
                    that.breadCrumb=JSON.parse(localStorage.getItem("breadCrumb"));
                }
            });
        },
        methods:{
            //切换侧边栏状态
            checkState(){
                this.$emit("listenState");
            },
            //返回首页
            goIndex(){

            },
            //跳转到个人信息界面
            goProfile(){
                this.$router.push({path: '/backendFramework/profile'});
            },
            //退出系统
            goHome(){
                localStorage.removeItem("user");
                this.$router.push("/login");
                this.$message({
                    message: "退出系统成功",
                    type: 'success'
                });
            }
        }
    }
</script>

<style scoped>
    .topBarHeaderTextStyle{
        line-height: 55px;
        height: 100%;

    }

    .topBar{
        height: 55px;
        width: 100%;
        border-bottom: 1px solid  #4240403b;
        text-align: left;
        display: flex;
    }
    .breadCrumbArea{
        display: inline-block;
        width: 40%;
    }
    .topBarIconStyle{
        font-size: 25px;
        line-height: 55px;
        margin-left: 15px;
        height: 100%;
    }

    .userIconStyle{
        display: inline-block;
        text-align: right;
        margin-right: 70px;
        flex: 1;
        height: 100%;
        cursor: pointer;
        pointer-events: auto;

    }

    .userNicknameStyle{
        margin: 0px 10px 0px 15px;
        display: inline-block;
        line-height: 55px;
        font-size: 16px;
    }

    .showProfile{
        display: inline-block;
    }

    .dropMenuItemStyle{
        height: 100%;
        width: 100%;
    }
</style>
